<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5" type="home">
{
  style: {
    navigationStyle: 'custom',
    // navigationBarBackgroundColor: '#2baeff',
    // navigationBarTitleText: '首页',
    navigationBarTextStyle: 'white',
  },
}
</route>
<template>
  <!-- <view class="bg-white overflow-hidden" >  :style="{ paddingTop: safeAreaInsets?.top + 'px' }"-->
  <view class="container-header">
    <view class="container-top">
      <wd-navbar
        safeAreaInsetTop
        title="首页"
        custom-style="background-color: transparent !important; color: #fff !important"
        :bordered="false"
      ></wd-navbar>
      <wd-swiper
        class="container-swiper"
        :list="swiperList"
        autoplay
        v-model:current="current"
        custom-image-class="custom-image"
        height="260rpx"
      ></wd-swiper>
    </view>
  </view>
  <waterFall :list="swiperList" :column="2"></waterFall>
  <wd-loadmore custom-class="loadmore" state="finished" />
</template>

<script lang="ts" setup>
import PLATFORM from '@/utils/platform'
import waterFall from '@/components/water-fall/index.vue'

defineOptions({
  name: 'index',
})

// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()

const waterFallList = ref([])

const current = ref<number>(0)

const swiperList = ref([
  'https://oss.satatools.com/upload/202302/02/202302021001113983.jpg',
  'https://oss.satatools.com/upload/202312/07/202312071317110645.jpg',
  'https://oss.satatools.com/upload/202410/16/202410161708120921.jpg',
  'https://oss.satatools.com/upload/202309/08/202309081445346647.jpg',
  'https://oss.satatools.com/upload/202404/02/202404021639431251.jpg',
])
</script>

<style lang="scss">
// @import '@/uni.scss';
.main-title-color {
  color: #d14328;
}

.container-header {
  height: 477rpx;
}
.container-top {
  width: 100%;
  height: 350rpx;
  background-color: $uni-home-color;
  border-radius: 0 0 50% 50%;
}

:deep(.wd-navbar__title) {
  color: #fff !important;
}

:deep(.wd-swiper) {
  width: 702rpx;
  height: 260rpx;
  margin: 0 auto;
  margin-top: 40rpx;
}
</style>
